<!DOCTYPE html>
<!-- saved from url=(0056)https://ptteng.github.io/PPT/PPT/js-04-event-flow.html#/ -->
<html xmlns="http://www.w3.org/1999/html" class=" js no-mobile desktop no-ie chrome chrome62 ppt-section ppt-section gradient rgba opacity textshadow multiplebgs boxshadow borderimage borderradius cssreflections csstransforms csstransitions no-touch no-retina fontface domloaded w-1366 gt-240 gt-320 gt-480 gt-640 gt-768 gt-800 gt-1024 gt-1280 lt-1440 lt-1680 lt-1920 no-portrait landscape" id="js-04-event-flow-page">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>葡萄藤PPT</title>
    <link rel="stylesheet" href="./葡萄藤PPT_files/reveal.css">
    <!-- PPT主题，可以在/css/reveal/theme/中选择其他主题，目前暂时只能使用该模板 -->
    <link rel="stylesheet" href="./葡萄藤PPT_files/ptt.css">
    <!-- syntax highlighting 代码高亮主题 -->
    <link rel="stylesheet" href="./葡萄藤PPT_files/zenburn.css">
    <!-- 打印和PDF输出样式 -->
    <script>
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = window.location.search.match(/print-pdf/gi) ? '../css/reveal/print/pdf.css' : '../css/reveal/print/paper.css';
    document.getElementsByTagName('head')[0].appendChild(link);
    </script>
    <link rel="stylesheet" type="text/css" href="./葡萄藤PPT_files/paper.css">
    <script type="text/javascript" src="./葡萄藤PPT_files/marked.js.下载"></script>
    <script type="text/javascript" src="./葡萄藤PPT_files/markdown.js.下载"></script>
    <script type="text/javascript" src="./葡萄藤PPT_files/notes.js.下载"></script>
    <script type="text/javascript" src="./葡萄藤PPT_files/highlight.js.下载"></script>
</head>

<body>
    <div class="reveal slide center" role="application" data-transition-speed="default" data-background-transition="fade">
        <div class="slides" style="width: 960px; height: 700px; left: 50%; top: 50%; bottom: auto; right: auto; transform: translate(-50%, -50%) scale(0.754714);">
            <section class="present" style="top: 87.5px; display: block;">
                <h2>
                IE事件流和W3C事件流有什么区别，参数分别是什么，以及如何阻止事件冒泡？
            </h2>
                <h3>成都小课堂</h3>
                <p>分享人：程仲夏</p>
            </section>
            <section class="future" style="top: 3px; display: block;" hidden="" aria-hidden="true">
                <p>目录</p>
                <p>1.背景介绍</p>
                <p>2.知识剖析</p>
                <p>3.常见问题</p>
                <p>4.解决方案</p>
                <p>5.编码实战</p>
                <p>6.扩展思考</p>
                <p>7.参考文献</p>
                <p>8.更多讨论</p>
            </section>
            <section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
                <h3>1.背景介绍</h3>
            </section>
            <section style="text-align: center; top: 0px; display: none;" class="stack future" data-previous-indexv="0" hidden="" aria-hidden="true">
                <section class="" style="top: 102px; display: none;" aria-hidden="true">
                    <h4>事件</h4>
                    <div style="text-align: left;overflow: auto;text-indent: 60px;font-size: 30px;line-height: 50px;">
                        <p>
                            JavaScript与HTML之间的交互是通过事件实现的。事件就是文档或浏览器窗口中发生的一些特定的交互动作。 它是用户或浏览器自身执行的某种动作，如click,load和mouseover都是事件的名字。
                        </p>
                        <p>
                            事件是javaScript和DOM之间交互的桥梁。
                        </p>
                        <p>
                            你若触发，我便执行——事件发生，调用它的处理函数执行相应的JavaScript代码给出响应。 典型的例子有：页面加载完毕触发load事件；用户单击元素，触发click事件。
                        </p>
                    </div>
                </section>
                <section class="future" aria-hidden="true" hidden="" style="top: 0px; display: none;">
                    <h4>事件流</h4>
                    <div style="text-align: left;text-indent: 60px;font-size: 30px;line-height: 50px;">
                        <p>
                            事件流描述的是从页面中接收事件的顺序。
                        </p>
                        <p>
                            当浏览器发展到第四代时(IE4及Netscape4)，浏览器开发团队遇到了一个很有意思的问题：页面的哪一部分会拥有某个特定的事件？ 可以想象画在一张纸上的一组同心圆。如果你把手指放在圆心上，那么你的手指指向的不是同一个圆，而是纸上的所有圆。
                        </p>
                        <p>
                            IE和网景两家公司的浏览器开发团队在看待浏览器事件方面还是一致的。如果单击了某个按钮，他们都认为单击事件不仅仅发生在按钮上。 在单击按钮的同时，也单击了按钮的容器元素，甚至也单击了整个页面。
                        </p>
                        <p>
                            IE提出的是冒泡流,而网景提出的是捕获流,后来在W3C组织的统一之下,JS支持了冒泡流和捕获流, 但是目前低版本的IE浏览器还是只能支持冒泡流(IE6,IE7,IE8均只支持冒泡流),所以为了能够兼容更多的浏览器,建议大家使用冒泡流。
                        </p>
                    </div>
                </section>
            </section>
            <section class="future" style="top: 267px; display: none;" hidden="" aria-hidden="true">
                <h3>2.知识剖析</h3>
            </section>
            <section class="stack future" style="top: 0px; display: none;" data-previous-indexv="0" hidden="" aria-hidden="true">
                <section class="" style="top: 90.5px; display: none;" aria-hidden="true">
                    <h4>事件冒泡</h4>
                    <div style="text-align: left;text-indent: 60px;font-size: 30px;line-height: 50px;">
                        <p>
                            IE的事件流叫做事件冒泡（event bubbling），即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播。也就是子级元素先触发，父级元素后触发。
                        </p>
                    </div>
                </section>
                <section class="future" style="top: 0px; display: none;" hidden="" aria-hidden="true">
                    <img src="./葡萄藤PPT_files/bubbling-1.png" alt="" style="float: right;">
                    <div id="div" style="position: absolute; width: 200px;height: 200px;background-color:#80b2da;" onclick="alert('Div');">Div
                        <div id="myDiv" style="position: absolute;top: 50%;left: 50%;margin-top: -50px; margin-left: -50px; width: 100px;height: 100px;background-color: #da80cc;" onclick="alert('myDiv');">myDiv</div>
                    </div>
                </section>
            </section>
            <section class="stack future" style="top: 0px; display: none;" data-previous-indexv="0" hidden="" aria-hidden="true">
                <section class="future" style="top: 0px; display: none;" hidden="" aria-hidden="true">
                    <h4>事件捕获</h4>
                    <div style="text-align: left;text-indent: 60px;font-size: 30px;line-height: 50px;">
                        <p>
                            网景团队提出的另一种事件流叫事件捕获（event capturing)。 事件捕获的思想是先由最上一级的节点先接收事件，然后向下传播到具体的节点。 也就是父级元素先触发，子级元素后触发。
                        </p>
                    </div>
                </section>
                <section class="future" style="top: 0px; display: none;" hidden="" aria-hidden="true">
                    <img src="./葡萄藤PPT_files/capturing-1.png" alt="" style="float: right;">
                    <div id="capturing-div" style="position: absolute; width: 200px;height: 200px;background-color:#80b2da;">Div
                        <div id="capturing-myDiv" style="position: absolute;top: 50%;left: 50%;margin-top: -50px; margin-left: -50px; width: 100px;height: 100px;background-color: #da80cc;">myDiv</div>
                    </div>
                    <script>
                    document.getElementById('capturing-div').addEventListener('click', function() { alert('Div'); }, true);
                    document.getElementById('capturing-myDiv').addEventListener('click', function() { alert('myDiv'); }, true);
                    </script>
                </section>
            </section>
            <section class="stack future" style="top: 0px; display: none;" data-previous-indexv="0" hidden="" aria-hidden="true">
                <section "=" " class="future " aria-hidden="true " hidden=" " style="top: 0px; display: none; ">
                <h4>DOM事件流</h4>
                <p style="text-align: left;font-size: 27px;line-height: 40px; ">
                    DOM标准采用捕获+冒泡。两种事件流都会触发DOM的所有对象，从document对象开始，也在document对象结束。<br>
                    DOM标准规定事件流包括三个阶段：<br>（1）事件捕获阶段<br>（2）处于目标阶段<br>（3）事件冒泡阶段<br>
                    首先发生的是事件捕获，然后是实际的目标接收到事件，最后阶段是冒泡阶段。
                </p>
                <img src="./葡萄藤PPT_files/eventflow.png " style="margin: 0; ">
            </section>
            <section class="future " aria-hidden="true " hidden=" " style="top: 0px; display: none; ">
                <p style="text-align: left;font-size: 27px;line-height: 40px;text-indent: 60px ">
                可以自己选择绑定事件时采用事件捕获还是事件冒泡，方法就是绑定事件时通过addEventListener函数，
                它有三个参数，第三个参数若是true，则表示采用事件捕获，若是false，则表示采用事件冒泡。
                </p>
                <pre style="height:40px; "><code class="hljs livecodeserver "><span class="hljs-keyword ">element</span>.addEventListener(event, <span class="hljs-function "><span class="hljs-keyword ">function</span>, <span class="hljs-title ">useCapture</span>)</span></code>
                </pre>
                <p style="text-align: left;font-size: 27px;line-height: 40px; ">
                    event：字符串，指定事件名。（不要使用 "on " 前缀。 例如，使用 "click " ,而不是使用 "onclick "。）<br>
                    function：指定要事件触发时执行的函数。<br>
                    useCapture：可选。布尔值，指定事件是否在捕获或冒泡阶段执行。(true - 事件句柄在捕获阶段执行;false- false- 默认。事件句柄在冒泡阶段执行)
                </p>
                <p style="text-align: left;font-size: 27px;line-height: 40px; ">
                    IE只支持事件冒泡，不支持事件捕获，它也不支持addEventListener函数，不会用第三个参数来表示是冒泡还是捕获，它提供了另一个函数attachEvent。
                </p><pre style="height:40px; "><code class="hljs xquery "> <span class="hljs-literal ">element</span>.attachEvent(<span class="hljs-string ">"onclick "</span>, doSomething2);</code>
                    </pre>
            </section>
            <section class="future " aria-hidden="true " hidden=" " style="top: 0px; display: none; ">
            	<p style="font-size: 27px;line-height: 40px; ">addEventListener允许在同一个元素上添加多个事件处理程序，如下所示：</p>
            	<img src="./葡萄藤PPT_files/self.png " alt=" ">
            </section>
            <section class="future " aria-hidden="true " hidden=" " style="top: 0px; display: none; ">
            	<p style="text-align: left ">结果：先输出“Div”，再输出“myDiv-false”，最后输出“myDiv-true”。</p>
				<p style="text-align: left ">
					在目标对象上同时绑定捕获阶段/冒泡阶段事件处理程序，触发目标对象时属于DOM事件流中的目标阶段。<br><br>目标阶段事件的执行顺序：先注册的先执行，后注册的后执行。也就是说，在目标对象上绑定的函数是采用捕获，还是采用冒泡，都没有什么关系，因为冒泡和捕获只是对父元素上的函数执行顺序有影响，对自己没有什么影响。
				</p>
            </section>
            <section class="future" aria-hidden="true " hidden=" " style="top: 0px; display: none; ">
				<div id="self-div" style="position: absolute; width: 400px;height: 400px;background-color:#80b2da; ">Div
        			<div id="self-myDiv" style="position: absolute;top: 50%;left: 50%;margin-top: -100px; margin-left: -100px; width: 200px;height: 200px;background-color: #da80cc; ">myDiv</div>
        		</div>
        		<script>
        			document.getElementById('self-div').addEventListener('click' , function(){alert('Div');} , true);
    				document.getElementById('self-myDiv').addEventListener('click' , function(){alert('myDiv-false');} , false);
        			document.getElementById('self-myDiv').addEventListener('click' , function(){alert('myDiv-true');} , true);
        		</script>
            </section>
        </section>
        <section style="text-align: left; top: 0px; display: none; " hidden=" " aria-hidden="true " class="stack future " data-previous-indexv="0 ">
            <section style="text-align: center; top: 267px; display: none; "><h3>3.常见问题</h3></section>
            <section style="text-align: left; top: 278.5px; display: none; " class="future " aria-hidden="true ">
                <h4 style="text-align: center ">如何阻止事件冒泡？</h4>
                <p>默认情况下，多个事件处理函数会按照DOM事件流模型中的顺序执行。如果子元素上发生某个事件，不需要执行父元素上注册的事件处理函数，那么我们可以停止捕获和冒泡，避免没有意义的函数调用。<br>IE8以及以前可以通过 window.event.cancelBubble=true阻止事件的继续传播；<br>IE9+/FF/Chrome通过event.stopPropagation()阻止事件的继续传播。</p>
            </section>
            <section class="future " aria-hidden="true " style="top: 330px; display: none; ">
				<img src="./葡萄藤PPT_files/stopPropagation.png" alt="">
            	<p style="text-align: left ">结果：先输出“Div1-true”，再输出“Div3-true”，最后输出“Div3-false”。不会输出“Div1-false”</p>
            	<p>因为当事件传播到Div3上的处理函数时，通过stopPropagation阻止了事件的继续传播，所以不会继续传播到冒泡阶段。</p>
            </section>
            <section class="future " aria-hidden="true " style="top: 330px; display: none; ">
            	<div id="stop-div1" style="position: relative; width: 400px; height: 400px; background-color: #80b2da;">Div1
        			<div id="stop-div2" style="position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -100px; width: 200px; height: 200px; background-color: #da80cc;">Div2
            			<div id="stop-div3" style="position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; width: 100px; height: 100px; background-color: #41ec84;">Div3</div>
        			</div>
    			</div>
				<script>
					document.getElementById('stop-div1').addEventListener('click' , function(){alert('Div1-true');} , true);
    				document.getElementById('stop-div1').addEventListener('click' , function(){alert('Div1-false');} , false);
    				document.getElementById('stop-div3').addEventListener('click' , function(){alert('Div3-true');event.stopPropagation()} , true);
    				document.getElementById('stop-div3').addEventListener('click' , function(){alert('Div3-false');} , false);
				</script>
            </section>

        </section>
        <section style="text-align: left; top: 0px; display: none; " hidden=" " aria-hidden="true " class="stack future " data-previous-indexv="0 ">
            <section style="text-align: center; top: 267px; display: none; "><h3>4 解决方案</h3></section>
        </section>
        <section style="text-align: left; top: 330px; display: none; " hidden=" " aria-hidden="true " class="stack future " data-previous-indexv="0 ">
            <section style="text-align: center; top: 330px; display: none; "><h3>5.编码实战</h3></section>
        </section>
        <section style="text-align: left; top: 330px; display: none; " hidden=" " aria-hidden="true " class="stack future " data-previous-indexv="0 ">
            <section style="top: 330px; display: none; ">
                <h3 style="text-align: center ">6.扩展思考</h3>
            </section>
        </section>
        <section hidden=" " aria-hidden="true " class="future " style="top: 330px; display: none; ">
            <h3>7.参考文献</h3>
            <p>参考1：<a href="http://www.cnblogs.com/starof/p/4066381.html ">javaScript事件（一）事件流</a></p>
            <p>参考2：<a href="http://www.jb51.net/article/42492.htm ">js之事件冒泡和事件捕获详细介绍</a></p>
        </section>
        <section hidden=" " aria-hidden="true " class="future " style="top: 330px; display: none; ">
            <h3>8 更多讨论</h3>
        </section>
        <section hidden=" " aria-hidden="true " class="future " style="top: 330px; display: none; ">

            <h4>鸣谢</h4>
            <p>感谢大家观看</p>
            <p><small>BY : 郭婷婷 | 程仲夏</small></p>
        </section>

    </div>
<div class="backgrounds "><div class="slide-background present " data-loaded="true " style="display: block; "></div><div class="slide-background future " data-loaded="true " style="display: block; "></div><div class="slide-background future " data-loaded="true " style="display: block; "></div><div class="slide-background stack future " data-loaded="true " style="display: none; "><div class="slide-background present " data-loaded="true " style="display: none; "></div><div class="slide-background future " data-loaded="true " style="display: none; "></div></div><div class="slide-background future " data-loaded="true " style="display: none; "></div><div class="slide-background stack future " data-loaded="true " style="display: none; "><div class="slide-background present " data-loaded="true " style="display: none; "></div><div class="slide-background future " data-loaded="true " style="display: none; "></div><div class="slide-background future " data-loaded="true " style="display: none; "></div><div class="slide-background future " data-loaded="true " style="display: none; "></div></div><div class="slide-background stack future " data-loaded="true " style="display: none; "><div class="slide-background present " data-loaded="true " style="display: none; "></div><div class="slide-background future " data-loaded="true " style="display: none; "></div></div><div class="slide-background stack future " data-loaded="true " style="display: none; "><div class="slide-background present " data-loaded="true " style="display: none; "></div><div class="slide-background future " style="display: none; "></div></div><div class="slide-background stack future " style="display: none; "><div class="slide-background present " style="display: none; "></div></div><div class="slide-background stack future " style="display: none; "><div class="slide-background present " style="display: none; "></div><div class="slide-background future " style="display: none; "></div></div><div class="slide-background future " style="display: none; "></div><div class="slide-background future " style="display: none; "></div><div class="slide-background future " style="display: none; "></div></div><div class="progress " style="display: block; "><span style="width: 0px; "></span></div><aside class="controls " style="display: block; "><button class="navigate-left " aria-label="previous slide "></button><button class="navigate-right enabled " aria-label="next slide "></button><button class="navigate-up " aria-label="above slide "></button><button class="navigate-down " aria-label="below slide "></button></aside><div class="slide-number " style="display: none; "></div><div class="speaker-notes " data-prevent-swipe=" "></div><div class="pause-overlay "></div><div id="aria-status-div " aria-live="polite " aria-atomic="true " style="position: absolute; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); ">
            
                IE事件流和W3C事件流有什么区别，参数分别是什么，以及如何阻止事件冒泡？
            
            成都小课堂
            分享人：程仲夏
        </div></div>
<script>
    angular.module("myApp ", [])
        .controller('demoCtrl',function ($scope) {
            $scope.aa='as111111'
        })
        .directive('demoOne',function () {

            return{
                restrict:"AECM ",
                template:'<input type="text " ng-model="aa ">',
                replace: true,
                scope:{},
                controller:['$scope',function ($scope) {
                    $scope.aa='ss1212'
                }]


            }
        })

</script>
<script src="./葡萄藤PPT_files/head.min.js.下载 "></script>
<script src="./葡萄藤PPT_files/reveal.js.下载 "></script>

<script>
    // 以下为常见配置属性的默认值
    // {
    // 	controls: true, // 是否在右下角展示控制条
    // 	progress: true, // 是否显示演示的进度条
    // 	slideNumber: false, // 是否显示当前幻灯片的页数编号，也可以使用代码slideNumber: 'c / t' ，表示当前页/总页数。
    // 	history: false, // 是否将每个幻灯片改变加入到浏览器的历史记录中去
    // 	keyboard: true, // 是否启用键盘快捷键来导航
    // 	overview: true, // 是否启用幻灯片的概览模式，可使用"Esc "或"o "键来切换概览模式
    // 	center: true, // 是否将幻灯片垂直居中
    // 	touch: true, // 是否在触屏设备上启用触摸滑动切换
    // 	loop: false, // 是否循环演示
    // 	rtl: false, // 是否将演示的方向变成RTL，即从右往左
    // 	fragments: true, // 全局开启和关闭碎片。
    // 	autoSlide: 0, // 两个幻灯片之间自动切换的时间间隔（毫秒），当设置成 0 的时候则禁止自动切换，该值可以被幻灯片上的 ` data-autoslide` 属性覆盖
    // 	transition: 'default', // 切换过渡效果，有none/fade/slide/convex/concave/zoom
    // 	transitionSpeed: 'default', // 过渡速度，default/fast/slow
    // 	mouseWheel: true, //是否启用通过鼠标滚轮来切换幻灯片
    // }
    // 初始化幻灯片
    Reveal.initialize({
        history: true,
        dependencies: [
            { src: '../plugin/markdown/marked.js' },
            { src: '../plugin/markdown/markdown.js' },
            { src: '../plugin/notes/notes.js', async: true },
            { src: '../plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }
        ]
    });
</script>


Contact GitHub API Training Shop Blog About
© 2016 GitHub, Inc. Terms Privacy Security Status He
</body></html>
